<extend name="./Application/Admin/View/Public/base.html" />
<block name="eosi-css">
    <link href="__PUBLIC__/assets/css/daterangepicker.css" rel="stylesheet">
    <link href="__PUBLIC__/assets/css/iconfont.css" rel="stylesheet">
    <link href="__PUBLIC__/assets/css/rili.css" rel="stylesheet">
    <link href="__PUBLIC__/assets/css/fileUpload.css?v=11" rel="stylesheet">
</block>
<block name="eosi-js"> <script
    src="__PUBLIC__/assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/laydate.dev.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        var $path_base = "/";//this will be used in gritter alerts containing images
    </script>
</block>
<block name="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-header header-color-blue">
                            <h5 class="lighter">
                                批量上传<span style="color:red; font-weight:bold;">商品</span>图片
                                 <span style="color:red; font-weight:bold;">(只能传png文件)</span>
                                <!-- <span class="red">(带*为必填项)</span> -->
                            </h5>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <form class="form-horizontal"  name="saveForm" id="saveForm"  method="post"  action="{:U('insertRule')}"  encType="multipart/form-data">
                                    <table class="table table-striped table-bordered table-hover">
                                        <tbody>
                                            <!-- <tr>
                                                <td class="no-padding-right" width="15%">
                                                    <label class="control-label"><small>选择图片用途</small></label>
                                                </td>
                                                <td>
                                                  <select id="mupicTypeSelect" name="mupicTypeSelect">
                                                    <option  value ="0"  >请选择</option>
                                                    <option  value ="1"  >商品</option>
                                                    <option  value ="2"  >造型</option>
                                                  </select>
                                                </td>
                                            </tr> -->

                                             <tr>
                                                <td class="no-padding-right" width="15%">
                                                    <label class="control-label"><small>批量上传
                                                        <span style="color:red; font-weight:bold;">商品</span>
                                                        图(最多50张,最大190M)</small>
                                                    </label>
                                                </td>
                                                <td>
                                                  <!--   <input type="text" id="sub_imgs" name="sub_imgs" value="" class="col-xs-10 col-sm-4" /> -->
                                                    <div id="fileUploadContent" class="fileUploadContent"></div>
                                                    <span class="middle control-label red">&nbsp;&nbsp;图片建议尺寸：1400x1700像素</span>
                                                    <input type="hidden" id="new_img" name="new_img" value="">
                                                    <input type="hidden" id="new_img_with_ori_name" name="new_img_with_ori_name" value="">
                                                </td>
                                            </tr>
                                            
                                           
                                           
                                            
                                        </tbody>
                                    </table>
                                    <table class="table table-striped table-bordered table-hover" id="answer">
                                        <tbody>
                                            <tr>
                                                <td class="no-padding-right" width="15%">

                                                </td>
                                                <td>
                                                    <button id="submitBT" disabled="disabled" class="btn btn-success" type="button" style="cursor: pointer;" onclick="checkSubmit();">
                                                        <i class="icon-ok bigger-110"></i>
                                                        请先选择商品图片文件上传
                                                    </button>
                                                    <button class="btn btn-warning" type="button" style="cursor: pointer;" onclick="returnButton({});">
                                                        <i class="icon-undo bigger-110"></i>
                                                        返回
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.row -->
    <script src="__PUBLIC__/assets/js/jqGrid/i18n/fileUpload.js"></script>
    <script type="text/javascript">
        
        var upload_session_key= Date.parse(new Date());
        $("#fileUploadContent").initUpload({
                        "uploadUrl":"/Admin/CloserCommodity/multiUploadPic",//上传文件信息地址
                        // "progressUrl":"/Admin/CloserCommodity/uploadProgress",//获取进度信息地址，可选，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）
                        "showSummerProgress":false,//总进度条，默认限制
                        //"size":350,//文件大小限制，单位kb,默认不限制
                        "maxFileNumber":50,//文件个数限制，为整数
                        // "filelSavePath":"__PUBLIC__/Uploads/",//文件上传地址，后台设置的根目录
                        "beforeUpload":beforeUploadFun,//在上传前执行的函数
                        "onUpload":onUploadFun,//在上传后执行的函数
                        "onDeleteSingle":onDeleteSingle,
                        autoCommit:true,//文件是否自动上传
                        "fileType":['png']//文件类型限制，默认不限制，注意写的是文件后缀
                    })
        function beforeUploadFun(opt){
            // opt.otherData =[{"session_key":upload_session_key}];
            if(uploadFileList.fileList.length<=0){
                return;
            }
            opt.otherData =[{"name":"session_key","value":upload_session_key}];
            // console.log(opt);
            $("#submitBT").attr("disabled","disabled");
            $("#submitBT").text("正在上传请稍候……");
        }
        function onUploadFun(opt,data){
            // console.log(data);
            // console.log(data);
            $("#new_img").val(data.info);
            $("#new_img_with_ori_name").val(data.infoMore);
            uploadTools.initWithCleanFile(opt);
            uploadTools.initWithUpload(opt);//初始化上传
            uploadTools.initWithSelectFile(opt);//初始化选择文件
            // uploadTools.uploadError(opt);//显示上传错误
            $("#submitBT").removeAttr("disabled");
            $("#submitBT").text("上传成功点击提交");
            var realNames = data.info.split(",");
            for (var i = realNames.length - 1; i >= 0; i--) {
                $("#fileUploadItemperry"+i).attr("fileServerName",realNames[i]);
            }
        }
        function onDeleteSingle(opt,realName){
            
            var realNames = $("#new_img").val().split(",");
            var newNames= new Array();
            for (var i = 0; i <=realNames.length - 1; i++) {
                if(realNames[i]!=realName){
                    newNames.push(realNames[i]);
                }
                
            }
            newNames=newNames.join(',');
            $("#new_img").val(newNames);
            var formData = new FormData();
            formData.append("realName",realName);
            formData.append("session_key",upload_session_key);
            formData.append("fromMultiUpload",1);
            $.ajax({
                type:"post",
                url:"/Admin/CloserCommodity/uploadDelete",
                data:formData,
                processData : false,
                contentType : false,
                success:function(data){
                    
                },
                error:function(e){

                }
            });

            

        }
        jQuery(function ($) {
            //提交Form
            checkSubmit = function () {
                
                var sub_imgs = $("#new_img").val();
                if(sub_imgs==''){
                    alert("请等待文件全部上传完毕.");
                    return;
                }
                // var picType=$("#mupicTypeSelect").val();
                // if(picType==0){
                //    alert("请先选择本批图片用途.");
                //     return; 
                // }
                $("#saveForm").attr('action', "{:U('multiUpload')}");
                $("#saveForm").attr('target', '_self'); 
                $("form[name=saveForm]").submit();

            }
            returnButton = function () {
                // location.href = "__CONTROLLER__/index";
                history.go(-1);
            }
        });
        $("#p_img").change(function() {
                $("#saveForm").attr('action', "{:U('uploadImg')}");
                $("#saveForm").attr('target', 'upload_img');
                $("#saveForm").submit();
            });
    </script>
</block>